<?php get_header() ?>
<script src="<?php echo bloginfo('template_url'); ?>/js/colorpicker/jquery.colorPicker.js" type="text/javascript"></script>
<link rel="stylesheet" href="<?php echo bloginfo('template_url'); ?>/js/colorpicker/colorPicker.css" type="text/css" />
<script type="text/javascript">
    function switchimg($elid){
        jQuery('.gallery li.imgele').hide();
        jQuery('#' + $elid).fadeIn();
    }
</script>
<div class="content hocnghe" >
    <div class="left_col album">
        <?php
        if (!session_id()) {
            session_start();
        }
        $user_id = $_SESSION['user_id'];

        global $wpdb;
        $tb_img = 'ap_painting_exam';
        $tb_user = 'ap_painting_user';
        $offset = isset($_GET['pagex']) ? 9 : 8;
        $from = isset($_GET['pagex']) ? ($_GET['pagex'] - 1) * $offset : 0;
        $limit = " LIMIT $from,$offset ";
        if (isset($_GET['detail']) && $_GET['detail']) {
            $userid = $_GET['detail'];
            $total = $wpdb->get_results("SELECT * FROM $tb_img WHERE user_id ={$userid}");
            $album = $wpdb->get_results("SELECT *, $tb_img.id as img_id FROM $tb_img LEFT JOIN $tb_user ON $tb_img.user_id = $tb_user.user_id WHERE $tb_img.user_id ={$userid} $limit");
            $flag = false;
        } else {
            $owneralbum = $wpdb->get_row("SELECT * FROM $tb_img LEFT JOIN $tb_user ON $tb_img.user_id = $tb_user.user_id WHERE  $tb_user.user_id = {$user_id} ");
            $total = $wpdb->get_results("SELECT * FROM $tb_img LEFT JOIN $tb_user ON $tb_img.user_id = $tb_user.user_id GROUP BY $tb_img.user_id");
            $album = $wpdb->get_results("SELECT * FROM $tb_img LEFT JOIN $tb_user ON $tb_img.user_id = $tb_user.user_id  WHERE  $tb_user.user_id != {$user_id} GROUP BY $tb_img.user_id $limit");
            $flag = true;
        }
        ?>
        <?php if ($_GET['imgid']) { ?>
            <img src="<?php echo $imgdetail->url ?>" />
        <?php } else { ?>
            <ul class="gallery">
                <?php
                if ($flag) {
                    $row = $owneralbum;
                    ?>
                    <li>
                        <span><img src="<?php echo bloginfo('template_url'); ?>/img/bangkeo.png"></span>
                        <a href="<?php echo $row->url ?>" rel="prettyPhoto[]" >
                            <img src="<?php echo $row->url ?>"></a>
                        <?php if ($flag) { ?>
                            <a href="<?php echo site_url('/') ?>album/?detail=<?php echo $row->user_id ?>">
                                <div class="info">
                                    Bài thi của bé <br /> <span><?php echo $row->name ?></span> <br /> (<?php echo $old ?> tuổi)
                                </div>
                            </a>
                        <?php } ?>

                    </li>
                <?php } ?>
                <?php  
                foreach ($album as $k => $row) {
                    
                    list($d, $m, $y) = explode("-", $row->birthday);
                    $old = 2013 - $y;
                    
                    ?>
                    <li id="ele_<?php echo $k ?>" class="imgele <?php echo $k ? ' hide' : '' ?>" >
                        <?php if ($flag) { ?>
                            <span><img src="<?php echo bloginfo('template_url'); ?>/img/bangkeo.png"></span>
                        <?php } ?>
                        <img class="<?php echo $flag ? '' : 'thumb';  ?>" src="<?php echo $row->url ?>">
                        <?php if ($flag) { ?>
                            <a href="<?php echo site_url('/') ?>album/?detail=<?php echo $row->user_id ?>">
                                <div class="info">
                                    Bài thi của bé <br /> <span><?php echo $row->name ?></span> <br /> (<?php echo $old ?> tuổi)
                                </div>
                            </a>
                        <?php } else { ?>
                            <div class="author">
                                <div class="name"><?php echo $row->name ?>&nbsp; <span>(<?php echo $old ?> tuổi)</span></div>
                                <div class="xpagina">
                                    <ul>
                                        <?php for($i = 0; $i < count($album); $i++ ){ ?>
                                        <li class="<?php echo $i == $k ?  'active' : '' ?>" onclick="switchimg('ele_<?php echo $i ?>');"><a href="javascript:void(0)"><?php echo $i + 1  ?></a></li>
                                        <?php } ?>
                                    </ul>
                                </div>
                            </div>
                        <div style="clear: both"></div>
                            <img style="box-shadow: 0 0 0; height: 20px; margin-top: -10px; width: 100%;" src="<?php echo bloginfo('template_url'); ?>/img/shadow.png" />
                        
                        <?php } ?>
                        <?php if (!$flag && $_SESSION['user_id'] == $row->user_id) { ?>
                            <a href="<?php echo site_url('/') ?>edit-img/?imgid=<?php echo $row->img_id ?>"><img class="editimg" src="<?php echo bloginfo('template_url'); ?>/img/repair.png" /></a>
                        <?php } ?>
                    </li>
                    
                <?php } ?>
                    
            </ul>
        <?php } ?>
    </div>
    <div class="pagination right_col">
        <ul> 
            <?php
            $totalpage = ceil(count($total) / $offset);
            for ($j = 0; $j < $totalpage; $j++) {
                $i = $totalpage - $j;
                if ($flag) {
                    $link = get_site_url('/') . "/album/?pagex=$i";
                } else {
                    $link = get_site_url('/') . "/album/?detail={$userid}&pagex=$i";
                }
                ?>
                <li><a href="javascript:void(0)<?php //echo $link ?>"><?php echo $i ?></a></li>
<?php } ?>

        </ul>
    </div>
</div>
<?php if ($flag) { ?>
<!-- tool bar --> 
<div class="toolbar">
    <ul>
        <li class="lefticon"><label>Undo</label><a href="javascript:;" ><img src="<?php echo bloginfo('template_url'); ?>/img/icon_back.png"></a></li>
        <li class="lefticon"><label>Zoom</label><a href="javascript:;" ><img class="ico-zoom" src="<?php echo bloginfo('template_url'); ?>/img/icon_zoom.png"></a></li>
        <li class="lefticon"><label>Eraser</label><a href="javascript:;" ><img src="<?php echo bloginfo('template_url'); ?>/img/icon_ease.png"></a></li>
        <li class="lefticon"><label>Bài thi</label><a href="<?php echo site_url('/') ?>exam"><img src="<?php echo bloginfo('template_url'); ?>/img/icon_book.png"></a></li>
        <li class="lefticon"><label>Save</label><a href="javascript:;" ><img src="<?php echo bloginfo('template_url'); ?>/img/icon_save.png"></a></li>
        <li class="lefticon"><label>Share</label><a href="javascript:void(0)" ><img src="<?php echo bloginfo('template_url'); ?>/img/icon_fb.png"></a></li>
        <li class="centerel"><span class="arw-left"></span><img src="<?php echo bloginfo('template_url'); ?>/img/icon_debai.png"><span class="arw-right"></span></li>
        <li id="colorpickx">
            <div id="radius-tool"><div id="slider-range-max"></div></div>
            <link href="<?php echo bloginfo('template_url'); ?>/css/jquery-ui.css" type="text/css" rel="stylesheet" />
            <script>
                $(function() {
                    $("#slider-range-max").slider({
                        range: "max",
                        min: 1,
                        max: 10,
                        value: 1,
                        slide: function(event, ui) {
                            radius = ui.value * 2;
                        }
                    });
                });
                function saveImage() {
                    var dataURL = canvas.toDataURL("image/png");
                    $.blockUI({css: {
                            border: 'none',
                            padding: '15px',
                            backgroundColor: '#000',
                            '-webkit-border-radius': '10px',
                            '-moz-border-radius': '10px',
                            opacity: .5,
                            color: '#fff'
                        }});
                    $.ajax({
                        type: "POST",
                        url: "<?php echo site_url() ?>/save-exam",
                        data: {
                            imgBase64: dataURL
                        }
                    }).done(function(url) {
                        jQuery('#latestimg').html(url);
                        $.unblockUI();
                        alert('Lưu ảnh thành công !');
                        editing = false;
                    });
                }
            </script>
            <input id="color" type="text" name="color" value="#000000" />
            <script type="text/javascript">
                $.fn.colorPicker.defaultColors = [
                    'ffffff', 'e9e9e9', 'c0c0c0',
                    'fdf78c', 'ffea01', 'bbbe01',
                    'f5e200', 'f0c101', 'a38001',
                    'fd9524', 'f2651e', 'b73902',
                    'fca2ae', 'ff7688', 'e8334e',
                    'fe64d9', 'f325c7', 'c7009b',
                    'f7524c', 'df1710', 'b01700',
                    '99cc53', '7eb130', '40760b',
                    '01a368', '017755', '004733',
                    '08b9ff', '0286c6', '005189',
                    'b638eb', '7811a1', '4a015b',
                    '0047ac', '07316d', '01143c',
                    '966d6c', '674140', '422928',
                    '3f3d3e', '1f1f1f', '000000'
                ];
                $('#color').colorPicker();
                $('#color_selector > div.color_swatch').last().addClass('active');
                $('.color_picker').click();
                $('.color_swatch').live('click', function() {
                    $('.color_swatch').removeClass('active');
                    $(this).addClass('active');
                });
                $('#color').change(function() {
                    curColor = convertHex($(this).val());
                    $('.centerel img').click();
                });
            </script>
            <style type="text/css">
                #color_selector{
                    display: block !important;
                    z-index: 999999;
                    margin-left: 15px;
                    background-color: white !important;
                    margin-top: -30px;
                }
                .color_picker{
                    display: none;
                }
                div.color_swatch{
                    border-color: transparent !important;
                    height: 30px;
                    width: 4px;
                    margin:0;
                    -webkit-transition-duration: 0.2s;
                    -moz-transition-duration: 0.2s;
                    -o-transition-duration: 0.2s;
                }
                .color_swatch.active, .color_swatch:hover{
                    height: 36px;
                    margin-top: -3px;
                }
                div#color_selector {
                    background-color: transparent;
                    border: medium none;
                    height: 23px;
                    padding: 2px;
                    position: absolute;
                    top: 759px !important;
                    width: 252px;
                }
                #color_custom{
                    display: none;
                }
                #slider-range-max{
                    margin-top: -28px;
                    width: 210px;
                    height: 5px;
                    margin-left: 40px;
                }
                .ui-slider .ui-slider-handle {
                    width: 0.8em;
                    height: 0.8em;
                }
                #addimg{
                    z-index: 1001;
                }
                /* Let's get this party started */
                ::-webkit-scrollbar {
                    width: 8px;
                    height: 8px;
                }

                /* Track */
                ::-webkit-scrollbar-track {
                    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
                    -webkit-border-radius: 8px;
                    border-radius: 8px;
                }

                /* Handle */
                ::-webkit-scrollbar-thumb {
                    -webkit-border-radius: 8px;
                    border-radius: 8px;
                    background: rgba(255,0,0,0.8); 
                    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
                }
                ::-webkit-scrollbar-thumb:window-inactive {
                    background: rgba(255,0,0,0.4); 
                }
                ::-webkit-scrollbar-corner {
                    background: transparent;
                }
            </style>
        </li>
    </ul>
    <div id="xbutton" class="folderimage">
        <img src="<?php echo bloginfo('template_url'); ?>/img/topbt.png" alt="" />
    </div>
</div>
<?php } ?>
<?php get_footer() ?>